<template>
	<view class="content">
		<!-- navbar部分 -->
				<u-navbar
					@leftClick="backHome"
					:autoBack="false"
					:bgColor="'rgba(15, 23, 79,1)'"
					:leftIconColor="'rgba(255,255,255,1)'"
					leftText="报告详情"
					style="margin-bottom: 128rpx;"
					>
				</u-navbar>
		<!-- 内容区域 -->
			<view class="xqTop">
				<view class="rwbm">
					<view class="rwbmTitle">
						<text>任务名称</text>
					</view>
					<view class="rwbmBox">
						<text>{{task_name}}</text>
					</view>
				</view>
				<view class="robotName">
					<view class="robotTitle">
						<text>机器人名称</text>
					</view>
					<view class="robotBox">
						<text>{{robot_name}}</text>
					</view>
				</view>
				<view class="time">
					<view class="timeTitle">
						<text>执行时间</text>
					</view>
					<view class="timeBox">
						<text>{{execution_time}}</text>
					</view>
				</view>
			</view>
	
			<!-- echarts部分折线图 -->
			<view class="echarts1">
				<echarts v-if="GasInfor.length>0 && positionX.length>0" :option="option" style="height:100%;width: 100%;"></echarts>
				<text v-else>气体折线图暂无数据</text>
			</view>
			
			<!-- 巡检点曝气结果报告 -->
			<view class="xjdxq">
				<!-- 标题 -->
				<view class="xjdxqTitle">
					<text style="margin-left: 34rpx;">巡检点曝气结果报告</text>
				</view>
				<view style="height: 262rpx;overflow: auto;">
					<table class="table">
					   <!-- 表头行 -->
					   <thead>
					     <tr>
					       <th align="center" width="70">巡检点</th>
					       <th align="center" width="85">报警状态</th>
					       <th align="center" width="85">报警值</th>
					       <th align="center" width="105">报警内容</th>
					     </tr>
					   </thead>
					   <!-- 表格数据行 -->
					   <tbody v-if="bqReport.length >0">
					     <tr v-for="(item,index) in bqReport" :key="index">
					       <td align="center">{{item.point}}</td>
					       <td align="center">
										<font v-if="item.state==0" style="font-size:20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #15C82A;">正常</font>
										<font v-else style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #ff0e0e;">报警</font>
								 </td>
					       <td align="center">{{item.alarm}}</td>
					       <td align="center">
										 <font v-if="item.alarmtype == -1">正常</font>
										 <font v-else-if="item.alarmtype == 0">小气泡</font>
										 <font v-else-if="item.alarmtype == 1">泡沫</font>
										 <font v-else-if="item.alarmtype == 2">大泡沫堆积</font>
										 <font v-else-if="item.alarmtype == 3">小块污泥</font>
										 <font v-else-if="item.alarmtype == 4">大块污泥堆积</font>
										 <font v-else-if="item.alarmtype == 5">液面</font>
										 <font v-else>其他</font>
								 </td>
					     </tr>
					   </tbody>
						 <tbody v-else>
						     <tr>
						 			<td colspan="12" style="text-align: center;padding-top: 100rpx;background-color: #fff;">暂无数据</td>
						     </tr>
						 </tbody>
					 </table>
				</view>
			</view>
			
	</view>
</template>

<script>
	import echarts from '@/components/echarts/echarts.vue'; //引入Echarts组件
	import {ReportDetails,aeration} from '@/api/details/details.js'
	import cookie from '../../../cookie.js'
	
	export default {
		data() {
			return {
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				robot_config_id:cookie.get('robotid'),
				task_id:cookie.get('xjbgtask_id'),
				
				//存储头部信息
				BasicInfor:{},
				//存储气体信息
				GasInfor:[],
				//点位数组(echarts的x轴数据)
				positionX:[],
				//氨气
				aq:[],
				//氧气
				yq:[],
				//硫化氢
				lhq:[],
				//甲烷
				jw:[],
				
				task_name:'无' , //任务名称
				robot_name:'无', //机器人名称
				execution_time:'无', //执行时间
				
				//巡检点曝气结果
				bqReport:[],
				
				//气体折线图
				option: {},
			};
		},
		components: {
			echarts
		},
		onShow() {
			this.xjbgxq() //巡检报告详情
			this.xjdbq() //巡检点曝气结果报告
		},
		mounted() {
			
		},
		methods:{
			//巡检报告详情
			xjbgxq(){
				ReportDetails(this.token,this.secretKey,this.robot_config_id,this.task_id).then(Response =>{
					this.BasicInfor = Response.data.bgcs
					if(Response.data.bgcs != undefined && Response.data.bgcs != null){
						this.task_name = Response.data.bgcs.task_name == null ? '无':Response.data.bgcs.task_name
						this.robot_name = Response.data.robot_name == null ? '无':Response.data.bgcs.robot_name
						this.execution_time = Response.data.execution_time == null ? '无':Response.data.bgcs.execution_time
					}else{
						this.task_name = '无'
						this.robot_name = '无'
						this.execution_time = '无'
					}
					
					this.GasInfor = Response.data.qtpjz
					//点位数组(echarts的x轴数据)
					this.GasInfor.map(item =>{
						this.positionX = this.GasInfor.map(({position_num})=>{
							return position_num
						})
					})
					
					//氨气
					this.GasInfor.map(item =>{
						this.aq = this.GasInfor.map(({aq})=>{
							return aq
						})
					})
			
					//氧气
					this.GasInfor.map(item =>{
						this.yq = this.GasInfor.map(({yq})=>{
							return yq
						})
					})
					//硫化氢
					this.GasInfor.map(item =>{
						this.lhq = this.GasInfor.map(({lhq})=>{
							return lhq
						})
					})
					//甲烷
					this.GasInfor.map(item =>{
						this.jw = this.GasInfor.map(({jw})=>{
							return jw
						})
					})
					//气体折线图
					this.echarts1()
				})
			},
			//巡检点曝气结果报告
			xjdbq(){
				aeration(this.token,this.secretKey,this.robot_config_id,this.task_id).then(Response =>{
					this.bqReport = Response.rows
					console.log('曝气',Response.rows)
				})
			},
			backHome(){
				uni.navigateTo({
					url:'/pages/common/Report/index'
				})
			},
			echarts1(){
				this.option = {
					//数据提示框
					tooltip: { },
					legend: {
						itemHeight:12,
						itemWidth:12,
						textStyle:{
							fontSize:9,
							color:'#666666'
						},
						data: ['氨气', '氧气', '硫化氢', '甲烷']
					},
					grid: {
						left: '4%',
						right: '4.5%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						// boundaryGap: false,
						data: this.positionX,
						axisLine: {
							lineStyle: {
								width: 0.1
							}
						},
						//刻度线
						axisTick:{
							show:false
						},
					},
					yAxis: {
						type: 'value',
						name:'单位:',
					},
					 series: [
					    {
					      name: '氨气',
					      type: 'line',
					      // stack: 'Total',
					      smooth:true,
					      data: this.aq,
					      lineStyle:{
					        color:'#50B0E6'
					      },
					       areaStyle: {
					       type: 'default',
					       color:'#CFDEF9'
					      },
					      symbol: 'circle',
					      symbolSize:6.5,
					      "itemStyle": {
					            //面积图里的颜色和圆点里的颜色
					            "color": "#1DC5F5",
					            //圆点外的颜色
					            "borderColor": "#fff",
					            //圆点的宽度
					            "borderWidth": 2,
					        },
					    },
					    {
					      name: '氧气',
					      type: 'line',
					      // stack: 'Total',
					      smooth:true,
					      data: this.yq,
					       lineStyle:{
					        color:'#E6AC50'
					      },
					     symbol: 'circle',
					     symbolSize:6.5,
					      "itemStyle": {
					            //面积图里的颜色和圆点里的颜色
					            "color": "#E6AC50",
					            //圆点外的颜色
					            "borderColor": "#fff",
					            //圆点的宽度
					            "borderWidth": 2,
					        },
					    },
					    {
					      name: '硫化氢',
					      type: 'line',
					      // stack: 'Total',
					      smooth:true,
					      data: this.lhq,
					       lineStyle:{
					        color:'#9245BF'
					      },
					      symbol: 'circle',
					      symbolSize:6.5,
					      "itemStyle": {
					            //面积图里的颜色和圆点里的颜色
					            "color": "#9245BF",
					            //圆点外的颜色
					            "borderColor": "#fff",
					            //圆点的宽度
					            "borderWidth": 2,
					        },
					    },
					    {
					      name: '甲烷',
					      type: 'line',
					      // stack: 'Total',
					      smooth:true,
					      data: this.jw,
					       lineStyle:{
					        color:'#76C74A'
					      },
					      symbol: 'circle',
					      symbolSize:6.5,
					      "itemStyle": {
					            //面积图里的颜色和圆点里的颜色
					            "color": "#76C74A",
					            //圆点外的颜色
					            "borderColor": "#fff",
					            //圆点的宽度
					            "borderWidth": 2,
					        },
					    }
					  ]
				};
			}
		}
	}
</script>

<style lang="scss">
*{
		margin: 0;
		padding: 0;
	}
	page{
		 background: #F5F5F5;
	}
	.content {
		// background-color: cadetblue;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: space-around;
		margin-top: 60rpx;
	}
	.xqTop{
		width: 610rpx;
		height: 215rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		// background-color: cadetblue;
	}
	.rwbm{
		width: 90%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: chocolate;
	}
	.rwbmTitle{
		width: 150rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		margin-right: 30rpx;
	}
	.rwbmBox{
		width: 351rpx;
		height: 50rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.robotName{
		width: 90%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: chocolate;
	}
	.robotTitle{
		width: 150rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		margin-right: 30rpx;
	}
	.robotBox{
		width: 351rpx;
		height: 50rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.time{
		width: 90%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: chocolate;
	}
	.timeTitle{
		width: 150rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		margin-right: 30rpx;
	}
	.timeBox{
		width: 351rpx;
		height: 50rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.echarts1{
		width: 610rpx;
		height: 450rpx;
		margin-top: 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: cornflowerblue;
	}
	.xjdxq{
		width: 560rpx;
		height: 426rpx;
		background:#ffffff;
		border-radius: 10rpx;
		margin-top: 82rpx;
		// background-color: coral;
	}
	.xjdxqTitle{
		width: 100%;
		height: 68rpx;
		background: #E8E9EF;
    border-radius: 10rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
		// margin-bottom: 10rpx;
	}
	.table thead th {
	   background: #FFFFFF;
	    position: sticky;
	    top: 0;
	    z-index: 1;
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			height: 58rpx;
	}
	.table tbody tr {
		height: 58rpx;
		border-radius: 10rpx;
		font-size: 23rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}
	.table tbody tr:nth-child(odd) {
	    background: #f1f4fe;
  }
	.table th,
	.table td {
	  border: none;
	}
	
	.table {
	  border-collapse: collapse;
	  border-spacing: 0;
	}
</style>
